<template>
  <div>
    <div v-if="!hasPermission('CUSTOMER_USER')">
      <!--背景画布-->
      <!--标签页-->
      <Tabs :animated="true" class="tab-box">
        <TabPane v-for="(item, index) in navBarList" :key="index.toString()">
          <!--使用插槽为标签页添加图标-->
          <template #tab>
            <Icon :icon="item.icon" />
            {{ item.name }}
          </template>
          <!--标签内容-->
          <InBox v-if="index === 0" />
          <HasBeenSent v-if="index === 1" />
          <Recipient v-if="index === 2" />
          <Template v-if="index === 3" />
          <Rule v-if="index === 4" />
        </TabPane>
        <!--发送通知按钮-->
        <template #rightExtra>
          <Button type="primary" size="middle" @click="openModal(true, true)">
            <Icon icon="iconamoon:send-duotone" />
            发送通知
          </Button>
        </template>
      </Tabs>
      <!--发送通知弹窗-->
      <SendNotificationsModal @register="registerModal" />
    </div>
    <div v-if="hasPermission('CUSTOMER_USER')">
      <InBox />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import InBox from './components/modal/InBox.vue';
  import HasBeenSent from './components/modal/HasBeenSent.vue';
  import Recipient from './components/modal/Recipient.vue';
  import Template from './components/modal/Template.vue';
  import Rule from './components/modal/Rule.vue';
  import { navBarList } from './components/data/notification.data';
  import Icon from '/@/components/Icon/src/Icon.vue';
  import { Tabs, TabPane, Button } from 'ant-design-vue';
  import SendNotificationsModal from './components/modal/SendNotificationsModal.vue';
  import { useModal } from '/@/components/Modal';
  import { usePermission } from '/@/hooks/web/usePermission';
  //获取用户信息
  const { hasPermission } = usePermission();
  // 初始化发送通知弹窗
  const [registerModal, { openModal }] = useModal();
</script>

<style lang="less" scoped>
  html[data-theme='dark'] {
    .tab-box :deep(.ant-tabs-nav) {
      background-color: #000;
    }
  }

  :deep(.ant-tabs-nav) {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 4px;
    background-color: white;
    height: 48px;
  }

  :deep(.ant-tabs-tab) {
    margin-left: 16px;
    margin-right: 16px;
  }

  :deep(.ant-tabs-content-holder) {
    margin-left: 4px;
    margin-right: 4px;
  }
</style>
